<template>
  <div class="container">
    <div class="lucky-wheel">
      <div class="lucky-title"></div>
      <div class="wheel-main">
        <div class="wheel-pointer-box">
          <div
            class="wheel-pointer"
            @click="rotate_handle()"
            :style="{transform:rotate_angle_pointer,transition:rotate_transition_pointer}"
          ></div>
        </div>
        <div
          class="wheel-bg"
          :style="{transform:rotate_angle,transition:rotate_transition}"
        >
          <div class="prize-list">
            <div
              class="prize-item"
              v-for="(item,index) in prize_list"
              :key="index"
            >
              <div class="prize-pic">
                <img
                  :src="item.icon"
                  :style="{width: item.width + 'px'}"
                >
              </div>
              <div
                class="prize-count"
                v-if="item.discounted"
              >
                {{item.discounted}}
              </div>
              <div class="prize-type">
                {{item.name}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="main-bg"></div>
      <div class="bg-p"></div>
      <div class="content">
        <div class="lottery_ticket">免费抽奖次数： {{ lottery_ticket}}</div>
      </div>
      <div class="tip">
        <div class="tip-title">活动规则</div>
        <div class="tip-content">
          <p> 1.每日签到后，即可获得一次幸运大转盘的机会，仅限当天有效，过期作废。 2.金币抽奖，每10个金豆可兑换一次大转盘机会。</p>
          <p> 2.金币抽奖，每10个金豆可以兑换一次大转盘抽奖机会</p>
          <p> 3.所中金豆或积分到【我的账户】中查询。累计达到100金豆及以上，可以兑换相应奖品</p>
        </div>
      </div>
    </div>
    <div
      class="toast"
      v-show="toast_control"
    >
      <div class="toast-container">
        <img
          :src="toast_pictrue"
          class="toast-picture"
        >
        <div
          class="close"
          @click="close_toast()"
        ></div>
        <div class="toast-title">
          {{toast_title}}
        </div>
        <div class="toast-btn">
          <div
            class="toast-cancel"
            @click="close_toast"
          >关闭</div>
        </div>
      </div>
    </div>
    <div
      class="toast-mask"
      v-show="toast_control"
    ></div>
  </div>
</template>
<script>
import {request} from '@/wxRequest/requestApi'

export default {
	data() {
		return {
			easejoy_bean: 0, //金豆
			lottery_ticket: 0, //抽奖次数
			winningPrize: [
				'https://com-jiaozheng-oss.oss-cn-qingdao.aliyuncs.com/cc/dine_dash.png',
				'https://com-jiaozheng-oss.oss-cn-qingdao.aliyuncs.com/cc/restaurant.png',
				'https://com-jiaozheng-oss.oss-cn-qingdao.aliyuncs.com/cc/j_z.png',
				'https://com-jiaozheng-oss.oss-cn-qingdao.aliyuncs.com/cc/j_l.png',
				'https://com-jiaozheng-oss.oss-cn-qingdao.aliyuncs.com/cc/y_j.png',
				'https://com-jiaozheng-oss.oss-cn-qingdao.aliyuncs.com/cc/z_j.png',
				'https://com-jiaozheng-oss.oss-cn-qingdao.aliyuncs.com/cc/j_f.png',
			], //中奖列表图片
			noPrize: 'https://com-jiaozheng-oss.oss-cn-qingdao.aliyuncs.com/cc/no_prize.png', //未中奖图片
			prize_list: [], //奖品列表
			toast_control: false, //抽奖结果弹出框控制器
			hasPrize: false, //是否中奖
			start_rotating_degree: 0, //初始旋转角度
			rotate_angle: 0, //将要旋转的角度
			start_rotating_degree_pointer: 0, //指针初始旋转角度
			rotate_angle_pointer: 0, //指针将要旋转的度数
			rotate_transition: 'transform 6s ease-in-out', //初始化选中的过度属性控制
			rotate_transition_pointer: 'transform 12s ease-in-out', //初始化指针过度属性控制
			click_flag: true, //是否可以旋转抽奖
			index: 0,
			timer: '', //定时器
		}
	},
	created() {},
	onShow() {
		this.init_prize_list()
		this._getLuckDrawNum()
	},
	onUnload() {
		this.rotate_angle = 0
		// clearTimeout(this.timer)
	},

	computed: {
		toast_title() {
			return this.hasPrize
				? '恭喜您，获得' + this.prize_list[this.index].discounted + ' ' + this.prize_list[this.index].name
				: '谢谢参与'
		},
		toast_pictrue() {
			return this.hasPrize
				? 'https://com-jiaozheng-oss.oss-cn-qingdao.aliyuncs.com/cc/congratulation.png'
				: 'https://com-jiaozheng-oss.oss-cn-qingdao.aliyuncs.com/cc/sorry.png'
		},
	},
	methods: {
		//此方法为处理奖品数据
		init_prize_list() {
			let params = {
				url: '/luckList',
				method: 'POST',
			}
			request(params).then(re => {
				console.log('奖品',re)
				if (re.status == 0) {
					let num = 0
					if (re.data.length > 8) {
						re.data = re.data.slice(0, 8)
					}
					re.data.forEach(item => {
						if (item.isValid == 1) {
							item['icon'] = this.noPrize
							item['isPrize'] = 0
							item['width'] = 44
							return
						}
						if (num === 0) {
							item['width'] = 44
						}
						if (num === 1) {
							item['width'] = 59
						}

						if (num === 4) {
							item['width'] = 60
						}
						if (num === 5) {
							item['width'] = 51
						}
						item['icon'] = this.winningPrize[num]
						item['isPrize'] = 1
						num++
					})
					this.prize_list = re.data
				}
			})
		},
		rotate_handle() {
			let params = {
				url: '/lottery',
				method: 'POST',
				data: {
					userId: wx.getStorageSync('userId'),
				},
			}
			request(params).then(re => {
				if (re.status == 0) {
					console.log('jinlaile')
					for (let i = 0; i <= this.prize_list.length; i++) {
							console.log('进来了')
							console.log( 'id',this.prize_list[i].id)
							console.log('对的上，吗',re.data.id)
						if (this.prize_list[i].id == re.data.id) {
								console.log('对上了')
							this.index = i //指定每次旋转到的奖品下标
							this.rotating()
							this.lottery_ticket--
							return
						}
					}
				} else {
					wx.showModal({
						title: '提示',
						content: re.msg,
						success: function(res) {
							if (res.confirm) {
							} else if (res.cancel) {
							}
						},
					})
				}
			})
		},
		rotating() {
			if (!this.click_flag) return
			var type = 0 // 默认为 0  转盘转动 1 箭头和转盘都转动(暂且遗留)
			var during_time = 5 // 默认为1s
			var random = Math.floor(Math.random() * 7)
			var result_index = this.index // 最终要旋转到哪一块，对应prize_list的下标
			var result_angle = [337.5, 292.5, 247.5, 202.5, 157.5, 112.5, 67.5, 22.5] //最终会旋转到下标的位置所需要的度数
			var rand_circle = 6 // 附加多转几圈，2-3
			this.click_flag = false // 旋转结束前，不允许再次触发
			if (type == 0) {
				// 转动盘子
				var rotate_angle =
					this.start_rotating_degree +
					rand_circle * 360 +
					result_angle[result_index] -
					this.start_rotating_degree % 360
				this.start_rotating_degree = rotate_angle
				this.rotate_angle = 'rotate(' + rotate_angle + 'deg)'
				// // //转动指针
				// this.rotate_angle_pointer = "rotate("+this.start_rotating_degree_pointer + 360*rand_circle+"deg)";
				// this.start_rotating_degree_pointer =360*rand_circle;
				var that = this
				// 旋转结束后，允许再次触发
				this.timer = setTimeout(function() {
					that.click_flag = true
					that.game_over()
				}, during_time * 1000 + 1500) // 延时，保证转盘转完
			} else {
				//
			}
		},
		game_over() {
			this.toast_control = true
			this.hasPrize = this.prize_list[this.index].isPrize
		},
		//关闭弹窗
		close_toast() {
			this.toast_control = false
					wx.navigateTo({url: '/pages/couponList/main'})
		},
		/**
		 * 获得抽奖次数
		 * @private
		 */
		_getLuckDrawNum() {
			let params = {
				url: '/getMember',
				method: 'POST',
				data: {
					userId: wx.getStorageSync('userId'),
				},
			}
			request(params).then(re => {
				if (re.status == 0) {
					this.lottery_ticket = re.data
				}
			})
		},
	},
}
</script>
<style scoped>
.container {
	width: 100%;
}

.lucky-wheel {
	width: 100%;
	height: 505px;
	background: rgb(252, 207, 133) url('https://yuncanting123.oss-cn-qingdao.aliyuncs.com/newmini/color_pillar.png')
		no-repeat center bottom;
	background-size: 100%;
	padding-top: 25px;
}

.lucky-title {
	width: 100%;
	height: 130px;
	background: url('https://yuncanting123.oss-cn-qingdao.aliyuncs.com/newmini/lucky_title.png') no-repeat center top;
	background-size: 100%;
}

.wheel-main {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.wheel-bg {
	width: 295px;
	height: 295px;
	background: url('https://yuncanting123.oss-cn-qingdao.aliyuncs.com/newmini/draw_wheel.png') no-repeat center top;
	background-size: 100%;
	color: #fff;
	font-weight: 500;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	transition: transform 3s ease;
}

.wheel-pointer-box {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 100;
	transform: translate(-50%, -60%);
	width: 85px;
	height: 85px;
}

.wheel-pointer {
	width: 85px;
	height: 85px;
	background: url('https://yuncanting123.oss-cn-qingdao.aliyuncs.com/newmini/draw_btn.png') no-repeat center top;
	background-size: 100%;
	transform-origin: center 60%;
}

.wheel-bg div {
	text-align: center;
}

.prize-list {
	width: 100%;
	height: 100%;
	position: relative;
}

.prize-list .prize-item {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.prize-list .prize-item:first-child {
	top: 0;
	left: 133px;
	transform: rotate(20deg);
}

.prize-list .prize-item:nth-child(2) {
	top: 44.8px;
	left: 172.8px;
	transform: rotate(67deg);
}

.prize-list .prize-item:nth-child(3) {
	top: 102.4px;
	left: 169.6px;
	transform: rotate(-250deg);
}

.prize-list .prize-item:nth-child(4) {
	top: 144px;
	left: 131.4px;
	transform: rotate(-200deg);
}

.prize-list .prize-item:nth-child(5) {
	top: 147.4px;
	left: 70.4px;
	transform: rotate(-160deg);
}

.prize-list .prize-item:nth-child(6) {
	top: 102.2px;
	left: 30.4px;
	transform: rotate(-111deg);
}

.prize-list .prize-item:nth-child(7) {
	top: 44.8px;
	left: 29px;
	transform: rotate(-69deg);
}

.prize-list .prize-item:nth-child(8) {
	top: 0;
	left: 72px;
	transform: rotate(-20deg);
}

.prize-item {
	width: 94px;
	height: 144px;
}

.prize-pic img {
	max-width: 65px;
	height: 40px;
	margin-top: 25px;
}

.prize-count {
	font-size: 14px;
	margin: -31px 0 15px;
}

.prize-type {
	padding: 0 15px;
	font-size: 12px;
}

.main {
	position: relative;
	width: 100%;
	min-height: 228px;
	background: rgb(243, 109, 86);
	padding-bottom: 27px;
}

.main-bg {
	width: 100%;
	height: 105px;
	position: absolute;
	top: -55px;
	left: 0;
	background: url('https://yuncanting123.oss-cn-qingdao.aliyuncs.com/newmini/luck_bg.png') no-repeat center top;
	background-size: 100%;
}

.bg-p {
	width: 100%;
	height: 47.2px;
	background: rgb(252, 207, 133);
}

.content {
	position: absolute;
	top: 2.8px;
	left: 0;
	background: rgb(243, 109, 86);
	width: 100%;
	height: 83px;
	font-size: 18px;
	color: #ffeb39;
	padding-left: 108px;
}

.content div {
	text-align: left;
}

.tip {
	position: relative;
	margin: 40px auto 0;
	width: 289px;
	border: 1px solid #fbc27f;
}

.tip-title {
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translate(-50%, 0);
	font-size: 16px;
	color: #fccc6e;
	background: rgb(243, 109, 86);
	padding: 5px 10px;
}

.tip-content {
	padding: 25px 10px;
	font-size: 14px;
	color: #fff8c5;
	line-height: 1.5;
}

.toast-mask {
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 10000;
	width: 100%;
	height: 100%;
}

.toast {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 20000;
	transform: translate(-50%, -50%);
	width: 247px;
	background: #fff;
	border-radius: 5px;
	padding: 5px;
	background-color: rgb(252, 244, 224);
}

.toast-container {
	position: relative;
	width: 100%;
	height: 100%;
	border: 1px dotted #fccc6e;
}

.toast-picture {
	position: absolute;
	top: -105px;
	left: -24px;
	width: 300px;
	height: 137px;
}

.toast-pictrue-change {
	position: absolute;
	top: -24px;
	left: -22px;
	width: 280px;
	height: 50px;
}

.toast-title {
	padding: 45px 0;
	font-size: 18px;
	color: #fc7939;
	text-align: center;
}

.toast-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 15px;
}

.toast-btn div {
	background-image: -moz-linear-gradient(-18deg, rgb(242, 148, 85) 0%, rgb(252, 124, 88) 51%, rgb(252, 124, 88) 99%);

	background-image: -ms-linear-gradient(-18deg, rgb(242, 148, 85) 0%, rgb(252, 124, 88) 51%, rgb(252, 124, 88) 99%);
	background-image: -webkit-linear-gradient(
		-18deg,
		rgb(242, 148, 85) 0%,
		rgb(252, 124, 88) 51%,
		rgb(252, 124, 88) 99%
	);
	box-shadow: 0px 4px 0px 0px rgba(174, 34, 5, 0.7);
	width: 75px;
	height: 30px;
	border-radius: 30px;
	text-align: center;
	line-height: 30px;
	color: #fff;
}

.close {
	position: absolute;
	top: -15px;
	right: -15px;
	width: 32px;
	height: 32px;
	background: url('https://yuncanting123.oss-cn-qingdao.aliyuncs.com/newmini/close_store.png') no-repeat center top;
	background-size: 100%;
}
</style>



